<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        padding: 50px;
    }
    
    .mydiv {
        height: 300px;
        width: 300px;
        border: 1px solid #ccc;
        /* box-sizing: border-box; */
    }
    
    .case1 {
        background: url('../1EAF1261.jpg') no-repeat #58a;
        background-position: 90%;
    }
    /* background-position 的扩展语法方案 */
    /* 回退方案 */
    
    .case2 {
        /* padding: 10px; */
        /*会受padding影响*/
        background: url('../1EAF1261.jpg') no-repeat bottom right #58a;
        background-position: right 20px bottom 10px;
    }
    /* border box（边框的外沿框）、padding box（内边距的外沿框）和content box
    （内容区的外沿框）。那background-position 这个属性指定的到底是哪个
    矩形框的左上角？
    默认情况下，background-position 是以padding box 为准的，这样边
    框才不会遮住背景图片。因此，top left 默认指的是padding box 的左上
    角。不过，在背景与边框（第三版）（http://w3.org/TR/css3-background）中，
    我们得到了一个新的属性background-origin，可以用它来改变这种行为。
    在默认情况下，它的值是（闭着眼睛也猜得到）padding-box。如果把它的
    值改成content-box（参见下面的代码），我们在background-position 属
    性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景
    图片距离边角的偏移量就跟内边距保持一致了） */
    
    .case3 {
        padding: 30px;
        background: url('../1EAF1261.jpg') no-repeat bottom right #58a;
        background-position: right 20px bottom 10px;
        background-origin: border-box;
    }
    /* calc() 方案  请不要忘记在calc() 函数
    内部的- 和+ 运算符的两侧各加
    一个空白符，*/
    
    .case4 {
        background: url('../1EAF1261.jpg') no-repeat;
        background-position: calc(100% - 20px) calc(100% - 10px);
    }
</style>

<body>
    <div class="mydiv case3">
        <h1>klklhj</h1>
    </div>
</body>

</html>